<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  User list</title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">
	
	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<!-- Site wrapper -->
<div class="wrapper">




  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Userlist
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Userlist</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		<div class="row">	
		
			<div class="col-lg-3 col-12">
				<div class="box">
					<div class="box-body">
					  <div class="contact-page-aside">
						<ul class="list-style-none font-size-16">
							<li class="box-label"><a href="javascript:void(0)">All User <span>123</span></a></li>
							<li class="divider"></li>
							<li><a class="text-success" href="javascript:void(0)">Online <span class="text-success">103</span></a></li>
							<li><a class="text-danger" href="javascript:void(0)">Offline <span class="text-danger">19</span></a></li>
							<li><a class="text-warning" href="javascript:void(0)">Available <span class="text-warning">623</span></a></li>
							<li class="box-label"><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal" class="btn btn-success text-white mt-10">+ Create New Label</a></li>
							<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel">Add Lable</h4>
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
										</div>
										<div class="modal-body">
											<from class="form-horizontal">
												<div class="form-group">
													<label class="col-md-12">Name of Label</label>
													<div class="col-md-12">
														<input type="text" class="form-control" placeholder="type name"> </div>
												</div>
												<div class="form-group">
													<label class="col-md-12">Select Number of people</label>
													<div class="col-md-12">
														<select class="form-control">
															<option>All Contacts</option>
															<option>10</option>
															<option>20</option>
															<option>30</option>
															<option>40</option>
															<option>Custome</option>
														</select>
													</div>
												</div>
											</from>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
											<button type="button" class="btn btn-default float-right" data-dismiss="modal">Cancel</button>
										</div>
									</div>
									<!-- /.modal-content -->
								</div>
								<!-- /.modal-dialog -->
							</div>
						</ul>
					</div>
				  </div>
				</div>
			  <!-- /. box -->
			</div>
		
			<div class="col-lg-9 col-12">	  
				<div class="box">
				  <div class="media-list media-list-divided media-list-hover">


					<div class="media align-items-center">
						
				  	  <span class="badge badge-dot badge-danger"></span>	
						
					  <a class="avatar avatar-lg status-success" href="#">
						<img src="../../../images/avatar/1.jpg" alt="...">
					  </a>

					  <div class="media-body">
						<p>
						  <a href="#"><strong>Aaron</strong></a>
						  <small class="sidetitle">Online</small>
						</p>
						<p>Designer</p>

						<nav class="nav mt-2">
						  <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
						</nav>
					  </div>

					  <div class="media-right gap-items">
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Orders"><i class="ti-shopping-cart"></i></a>
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Receipts"><i class="ti-receipt"></i></a>

						<div class="btn-group">
						  <a class="media-action lead" href="#" data-toggle="dropdown"><i class="ion-android-more-vertical"></i></a>
						  <div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-comments"></i> Messages</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-remove"></i> Remove</a>
						  </div>
						</div>

					  </div>
					</div>

					<div class="media align-items-center">
						
				  	  <span class="badge badge-dot badge-warning"></span>	
						
					  <a class="avatar avatar-lg" href="#">
						<img src="../../../images/avatar/2.jpg" alt="...">
					  </a>

					  <div class="media-body">
						<p>
						  <a href="#"><strong>Isaiah</strong></a>
						  <small class="sidetitle">Last seen: 2 hours ago</small>
						</p>
						<p>Full Stack Developer</p>

						<nav class="nav mt-2">
						  <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
						</nav>
					  </div>

					  <div class="media-right gap-items">
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Orders"><i class="ti-shopping-cart"></i></a>
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Receipts"><i class="ti-receipt"></i></a>
						<div class="btn-group">
						  <a class="media-action lead" href="#" data-toggle="dropdown"><i class="ion-android-more-vertical"></i></a>
						  <div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-comments"></i> Messages</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-remove"></i> Remove</a>
						  </div>
						</div>

					  </div>
					</div>

					<div class="media align-items-center">
						
				  	  <span class="badge badge-dot badge-success"></span>	
						
					  <a class="avatar avatar-lg status-warning" href="#">
						<img src="../../../images/avatar/3.jpg" alt="...">
					  </a>

					  <div class="media-body">
						<p>
						  <a href="#"><strong>Cameron</strong></a>
						  <small class="sidetitle">Last seen: 12 min ago</small>
						</p>
						<p>Support Agent</p>

						<nav class="nav mt-2">
						  <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
						</nav>
					  </div>

					  <div class="media-right gap-items">
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Orders"><i class="ti-shopping-cart"></i></a>
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Receipts"><i class="ti-receipt"></i></a>
						<div class="btn-group">
						  <a class="media-action lead" href="#" data-toggle="dropdown"><i class="ion-android-more-vertical"></i></a>
						  <div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-comments"></i> Messages</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-remove"></i> Remove</a>
						  </div>
						</div>

					  </div>
					</div>

					<div class="media align-items-center">
						
				  	  <span class="badge badge-dot badge-danger"></span>	
						
					  <a class="avatar avatar-lg status-success" href="#">
						<img src="../../../images/avatar/4.jpg" alt="...">
					  </a>

					  <div class="media-body">
						<p>
						  <a href="#"><strong>Eli</strong></a>
						  <small class="sidetitle">Online</small>
						</p>
						<p>Support Agent</p>

						<nav class="nav mt-2">
						  <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
						</nav>
					  </div>

					  <div class="media-right gap-items">
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Orders"><i class="ti-shopping-cart"></i></a>
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Receipts"><i class="ti-receipt"></i></a>
						<div class="btn-group">
						  <a class="media-action lead" href="#" data-toggle="dropdown"><i class="ion-android-more-vertical"></i></a>
						  <div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-comments"></i> Messages</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-remove"></i> Remove</a>
						  </div>
						</div>

					  </div>
					</div>

					<div class="media align-items-center">
						
				  	  <span class="badge badge-dot badge-success"></span>	
						
					  <a class="avatar avatar-lg status-success" href="#">
						<img src="../../../images/avatar/5.jpg" alt="...">
					  </a>

					  <div class="media-body">
						<p>
						  <a href="#"><strong>Charles</strong></a>
						  <small class="sidetitle">Last seen: yesterday</small>
						</p>
						<p>Marketing Department</p>

						<nav class="nav mt-2">
						  <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
						  <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
						</nav>
					  </div>

					  <div class="media-right gap-items">
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Orders"><i class="ti-shopping-cart"></i></a>
						<a class="media-action lead" href="#" data-toggle="tooltip" title="Receipts"><i class="ti-receipt"></i></a>
						<div class="btn-group">
						  <a class="media-action lead" href="#" data-toggle="dropdown"><i class="ion-android-more-vertical"></i></a>
						  <div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-comments"></i> Messages</a>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#"><i class="fa fa-fw fa-remove"></i> Remove</a>
						  </div>
						</div>

					  </div>
					</div>

				  </div>


				  <nav class="mt-15 pb-10">
					<ul class="pagination justify-content-center">
					  <li class="page-item disabled">
						<a class="page-link" href="#">
						  <span class="ion-ios-arrow-thin-left"></span>
						</a>
					  </li>
					  <li class="page-item active"><a class="page-link" href="#">1</a></li>
					  <li class="page-item"><a class="page-link" href="#">2</a></li>
					  <li class="page-item"><a class="page-link" href="#">3</a></li>
					  <li class="page-item"><a class="page-link" href="#">4</a></li>
					  <li class="page-item"><a class="page-link" href="#">5</a></li>
					  <li class="page-item">
						<a class="page-link" href="#">
						  <span class="ion-ios-arrow-thin-right"></span>
						</a>
					  </li>
					</ul>
				  </nav>
				</div>		
			</div>
			
		</div>
		
		
		
    </section>
    <!-- /.content -->
  </div>


</div>



	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	

</body>
</html>
